<template>
  <div>
    <el-row>
      <el-col :span="1">
        <div class="grid-content bg-purple-light">
          <!-- <div style="height: 50px;"></div> -->
          <!-- <div style="background-color: #ccc;height: 500px; width: 6px;margin-left:43px;"></div> -->
        </div>
      </el-col>
      <el-col :span="15">
        <div style="margin-bottom: 0px; background-color:#ccc;height:40px; text-align: center;">
          <div style="padding-top: 8px;font-size: 20px;">远程文件浏览器</div>
        </div>
        <el-row>
          <el-col :span="1">
            <div>
              <div style="background-color: #ccc;height: 578px; width: 6px;"/>
            </div>
          </el-col>
          <el-col :span="23">
            <div>
              <el-row>
                <el-col :span="2">
                  <div style="margin-top: 10px;" class="grid-content bg-purple">
                    <el-button icon="el-icon-back" class="btn1Class" circle @click="getBack"/>
                  </div>
                </el-col>
                <el-col :span="9">
                  <div style="margin-top: 10px;" class="grid-content bg-purple-light">
                    <el-input
                      v-model="selectpath"
                      class="filter-item"
                      placeholder="请输入路径"
                      @keydown.enter.native="selectFiles"
                    />
                  </div>
                </el-col>
                <el-col :span="2">
                  <div style="margin-top: 10px;" class="grid-content bg-purple">
                    <el-button icon="el-icon-search" class="btn2Class" circle @click="selectFiles"/>
                  </div>
                </el-col>
                <el-col :span="9">
                  <div style="margin-top: 10px;" class="grid-content bg-purple-light">
                    <el-input
                      v-model="selectname"
                      class="filter-item"
                      placeholder="请输入名称"
                      @keydown.enter.native="selectName"
                    />
                  </div>
                </el-col>
                <el-col :span="2">
                  <div style="margin-top: 10px;" class="grid-content bg-purple">
                    <el-button icon="el-icon-search" class="btn2Class" circle @click="selectName"/>
                  </div>
                </el-col>
              </el-row>
              <div class="explorerBox" @click="unselectFile()">
                <Explorer
                  v-if="dataArr.length>0"
                  mode="normal"
                  :data-arr="dataArr"
                  :selected-arr.sync="selectedArr"
                  @clickFolder="clickItem"
                  @clickFile="clickItem"
                  @dblclickFolder="dblclickFolder"
                  @dblclickFile="dblclickFile"
                />
              </div>
              <!-- <div style="background-color: #ccc;height: 10px;"></div> -->
              <div style="height: 40px; text-align: right;">
                <el-button style="margin-right: 30px;" class="btn3Class" round @click="allSelect()"
                           v-text="allSelectButton"></el-button>
                <el-button style="margin-right: 10px;" class="btn3Class" :disabled="selectedArr.length===0" round
                           @click="submitTask">
                  加入提交文件
                </el-button>
                <el-button class="btn3Class" round @click="reChoose">重置选择列表</el-button>
              </div>
              <!-- <div style="background-color: #ccc;height: 10px;"></div> -->
            </div>
            <!-- <div style="margin-bottom: 0px; background-color:#ccc ;"></ -->
          </el-col>

        </el-row>

      </el-col>
      <el-col :span="1">
        <div class="grid-content bg-purple-light">
          <div style="background-color: #ccc;height: 600px; width: 6px;"/>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <div>
            <div style="margin-bottom: 0px; background-color:#ccc;height:40px;text-align: center;">
              <div style="padding-top: 8px;font-size: 20px;">已选中</div>
            </div>
          </div>
          <el-row>
            <el-col :span="1">
              <div class="grid-content bg-purple">
                <div style="margin-top: 0px;" class="grid-content bg-purple-light">
                  <div style="background-color: #ccc;height: 578px; width: 6px;"/>
                </div>
              </div>
            </el-col>
            <el-col :span="23">
              <div class="grid-content bg-purple-light">
                <div class="explorerBox" @click="unselectFile1()">
                  <Explorer
                    mode="normal"
                    :data-arr="TaskdataArr"
                    :selected-arr.sync="TaskSelectedArr"
                    @clickFolder="clickItem1"
                    @clickFile="clickItem1"
                    @dblclickFolder="dblclickFolder"
                    @dblclickFile="dblclickFile"
                  />
                </div>
                <div style="height: 40px; text-align: right;margin-top: 40px;">
<!--                  <el-button class="btn3Class" style="color:red" round :disabled="true"><b>文件夹数量: </b>{{this.fileDirCount}}</el-button>-->
<!--                  <el-button class="btn3Class" round :disabled="true">文件数量: {{this.fileCount}}</el-button>-->
                  <el-button type="primary" round :disabled="true"><b>文件夹数量: {{this.fileDirCount}}</b></el-button>
                  <el-button type="primary" round :disabled="true"><b>文件数量: {{this.fileCount}}</b></el-button>
                  <el-button class="btn3Class" round @click="allSelect1()"
                             v-text="allSelectButton1" :disabled="TaskdataArr.length===0"></el-button>
                  <el-button style="margin-right: 10px;" class="btn3Class" :disabled="canAssign===false || TaskdataArr.length === 0" round
                             @click="assign()">分配人员
                  </el-button>
                  <el-button style="margin-right: 10px;" class="btn3Class"
                             :disabled="TaskdataArr.length===0||TaskSelectedArr.length===0" round
                             @click="removefilelist">移除
                  </el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 分配人员对话框 -->
    <el-dialog
      title="请分配任务"
      :visible.sync="dialogVisible"
      width="30%"
      @close="cancel"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="form.taskName" clearable style="width: 55%" placeholder="请输入任务名称"/>
        </el-form-item>
        <el-form-item label="用户姓名" prop="assignUserId">
          <el-select v-model="form.assignUserId" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm('form')">确定分配</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { postImageData, getFiles, getAllImage } from '../../../service/commonService'
import {updateAssignedImages, insertAssignedImages, getTaskImageNum} from '../../../api/commonService'
import crudTask from '@/api/task/taskassign'
import Explorer from './explorer'

export default {
  name: 'Taskassign',
  components: {
    Explorer
  },
  props: {
    fileList: {}
  },
  data() {
    return {
      // 已选中图片数量
      fileCount: 0,
      fileDirCount: 0,

      onShift: false, //是否按下shift键
      // allSelectButton: '全选',
      selectStartIndex: -1,  //左侧多选的起始文件位置
      selectEndIndex: -1,  //左侧多选的结束文件位置
      selectStartIndex1: -1,  //右侧多选的起始文件位置
      selectEndIndex1: -1,  //右侧多选的结束文件位置
      form: {
        taskName: '',
        assignUserId: ''
      },
      rules: {
        taskName: [{ required: true, message: '请输入', trigger: 'blur' }],
        assignUserId: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      url: '',
      srcList: [],
      users: [],
      imageUrl: '',
      actionUrl: '',
      selectname: '',
      imageUrlable: '',
      file_list: [], // 上传文件目录数组
      taskName: '', // 任务名称
      assignUserId: '', // 被指派用户的ID
      assignUserNickName: '', // 被指派用户的姓名
      image_list: [], // 上传图片目录数组
      is: false,
      dataCopy: [],
      dialogVisible: false,
      centerDialogVisible: false,
      // selectpath: '/home/fzuir/newspaper_data',  // 默认的查询路径
      // selectpath: '/home/data/newspaper/jpg',
      selectpath: '',
      currentPath: '',
      canAssign: false,
      pathStack: [],
      dataArr: [],
      TaskdataArr: [],
      selection: true,
      selectedArr: [],    // 选择的文件
      TaskSelectedArr: [],
      otherColumnArr: [
        {
          label: '时间',
          key: 'time'
        }
      ],
      seletedFileList: []
    }
  },
  computed: {
    allSelectButton(){
      if(this.selectedArr.length === this.dataArr.length){
        return '取消全选'
      }
      else{
        return '全选'
      }
    },
    allSelectButton1(){
      if(this.TaskSelectedArr.length === this.TaskdataArr.length){
        return '取消全选'
      }
      else{
        return '全选'
      }
    }
  },
  activated() {
    console.log('activate 任务分配')
    window.addEventListener('keydown', this.keydown)
    window.addEventListener('keyup', this.keyup)
  },
  deactivated() {
    console.log('deactivate 任务分配')
    window.removeEventListener('keydown', this.keydown)
    window.removeEventListener('keyup', this.keyup)
  },
  beforeDestroy() {
    console.log('beforeDestroy 任务分配')
    window.removeEventListener('keydown', this.keydown)
    window.removeEventListener('keyup', this.keyup)
  },
  mounted() {
    console.log('mount')
  },
  created() {
    console.log('create 任务分配')
    this.selectpath = process.env.VUE_APP_SELECT_PATH
    this.getResource()
    window.addEventListener('keydown', this.keydown)
    window.addEventListener('keyup', this.keyup)
  },
  methods: {
    keyup(e) {
      if (e.which === 16) {
        this.onShift = false
      }
    },
    keydown(e) {
      if (e.shiftKey) {
        console.log('按下shift')
        this.onShift = true
      }
    },
    cancel() {
      this.resetForm()
    },
    resetForm() {
      this.dialogVisible = false
      this.$refs['form'].resetFields()
      this.form = {
        taskName: '',
        assignUserId: ''
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.taskName = this.form.taskName
          this.assignUserId = this.form.assignUserId
          this.assginTask()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //全选
    allSelect() {
      if (this.selectedArr.length < this.dataArr.length) {  //全选
        console.log('全选')
        for (let i = 0; i < this.dataArr.length; i++) {
          let flag = 0
          for (let j = 0; j < this.selectedArr.length; j++) {
            if (this.dataArr[i].key === this.selectedArr[j].key) {
              flag = 1
              break
            }
          }
          if (flag === 0) {
            this.selectedArr.push(this.dataArr[i])
          }
        }
      } else {
        this.unselectFile()
      }
    },
    unselectFile() {
      console.log('取消选择全部文件')
      this.selectedArr = []
      this.selectStartIndex = -1
      this.selectEndIndex = -1
      this.onShift = false
    },
    //右侧窗口的全选
    allSelect1() {
      if (this.TaskSelectedArr.length < this.TaskdataArr.length) {  //全选
        console.log('全选')
        for (let i = 0; i < this.TaskdataArr.length; i++) {
          let flag = 0
          for (let j = 0; j < this.TaskSelectedArr.length; j++) {
            if (this.TaskdataArr[i].key === this.TaskSelectedArr[j].key) {
              flag = 1
              break
            }
          }
          if (flag === 0) {
            this.TaskSelectedArr.push(this.TaskdataArr[i])
          }
        }
      } else {
        this.unselectFile1()
      }
    },
    unselectFile1() {
      console.log('取消选择全部文件')
      this.TaskSelectedArr = []
      this.selectStartIndex = -1
      this.selectEndIndex = -1
      this.onShift = false
    },
    // 点击“确定分配”
    assginTask() {
      this.$confirm('是否确定任务分配？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {}
        data.fileList = this.file_list
        data.taskName = this.taskName
        data.userId = this.assignUserId
        data.imageList = this.image_list
        crudTask.assignTask(data).then(res => {
          insertAssignedImages(this.image_list).then((res)=>{
            this.getData(this.selectpath)  //刷新左侧选择栏
            this.fileCount = 0
            this.fileDirCount = 0
          }).catch((error)=>{
            console.log('更新AssignedImages数组发生错误', error)
          })
        })
        this.$message({
          type: 'success',
          message: '分配成功!'
        })
        this.dialogVisible = false
        this.TaskdataArr = []
        this.selectedArr = []
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '分配失败'
        })
      })
    },
    // 点击“分配人员”
    assign() {
      // console.log(this.TaskdataArr)
      this.file_list = []
      this.image_list = []
      for (let i = 0; i < this.TaskdataArr.length; i++) {
        this.file_list.push(this.TaskdataArr[i].filepath)
      } // 处理file_list

      // 获取分配的所有图片  image_list
      getAllImage(this.file_list).then(res => {
        this.image_list = res.data.allList
        let num_hasAssigned = res.data.num_hasAssigned
        console.log('已被分配的图片数量', num_hasAssigned)
        if(num_hasAssigned>0){
          this.$message({
            type: 'warning',
            message: '有 '+num_hasAssigned.toString()+' 张图片已被分配,并已被过滤'
          })
        }
        console.log('选择的所有图片', this.image_list)
      }).catch((error) => {
        console.log('通讯出错', error)
      })

      // 获取所有用户角色对应的用户
      this.users = []
      crudTask.queryUser().then(res => {
        for (let i = 0; i < res.length; i++) {
          const user = {}
          user.nickName = res[i].nickName
          user.id = res[i].id
          this.users.push(user)
        }
      })
      this.dialogVisible = true
    },
    selectName() {
      const data = []
      if (this.selectname === '') {
        this.getResource()
      } else {
        // console.log("22222")
        for (let i = 0; i < this.dataCopy.length; i++) {
          if (!this.dataCopy[i].name.indexOf(this.selectname)) {
            data.push(this.dataCopy[i])
          }
        }
      }
      this.dataArr = data
      // console.log(this.dataArr)
    },
    removefilelist() {
      // this.TaskdataArr = this.TaskdataArr - this.TaskSelectedArr
      const list = []
      for (let i = 0; i < this.TaskdataArr.length; i++) {
        if (this.TaskSelectedArr.indexOf(this.TaskdataArr[i]) === -1) {
          list.push(this.TaskdataArr[i])
        }
      }
      // 移除后重新获取数量
      this.fileCount = 0
      this.fileDirCount = 0
      getTaskImageNum(list).then(res=>{
        this.fileCount = res.data.fileCount
        this.fileDirCount = res.data.fileDirCount
      })
      this.TaskdataArr = list
      this.TaskSelectedArr = []
    },
    getResource() {
      this.isDialogOpen = true
      this.centerDialogVisible = true
      this.getData(this.selectpath)
    },
    getData(filepath) {
      let i = Date.parse(new Date())
      getFiles(filepath).then((res) => {
        console.log('getFiles返回成功：', res)
        if (res.data.status === 1) {
          // console.log(res.data)
          this.dataArr = []
          const folderFiles = res.data.allList
          for (const item of folderFiles) {
            // // console.log(item)
            const data_item = {}
            data_item['key'] = i++
            data_item['name'] = item.filename
            data_item['show_name'] = item.filename
            data_item['filepath'] = item.filepath
            data_item['type'] = item.type
            if (item.type === 'image') {
              data_item['height'] = item.height
              data_item['size'] = item.size
              data_item['width'] = item.width
              data_item['hasAssign'] = item.hasAssign
              // data_item['base64'] = item.base64
            }
            this.dataArr.push(data_item)
          }
          // console.log('dataArr:', this.dataArr)
          console.log('dataArr:')
          console.log(this.dataArr)
          this.dataCopy = this.dataArr
          this.currentPath = filepath // 获取filepath下的文件夹后，把当前路径设置为filepath
          this.selectpath = filepath
        } else {
          this.openMessageBox('路径不存在')
          // console.log('11111111', this.dataArr)
        }
      }).catch((error) => {
        console.log('fileSel与后端通讯发生错误', error)
      })
    },
    clickFolder(item) {
      // console.log('clickFolder', item)
    },
    clickFile(item) {
    },
    clickItem(item) {
      //如果事先并没有选中任何的文件，则设置其为开始
      if (this.selectStartIndex === -1) {
        console.log('事先并没有选中任何的文件，则设置其为开始')
        for (let i = 0; i < this.dataArr.length; i++) {
          if (this.dataArr[i].key === item.key) {
            this.selectStartIndex = i
            break
          }
        }
      }
      else {
        if (this.onShift) {
          console.log('事先点击了某个文件，然后按住shift点了另外一个文件，选中开始到结束')
          setTimeout(()=>{
            for (let i = 0; i < this.dataArr.length; i++) {
              if (this.dataArr[i].key === item.key) {
                this.selectEndIndex = i
                break
              }
            }
            let start = this.selectStartIndex
            let end = this.selectEndIndex
            if(start > end){  //交换开始和结束
              start = this.selectEndIndex
              end = this.selectStartIndex
            }
            this.selectedArr = []
            for (let i = start; i <= end; i++) {
              let flag = 0
              for (let j = 0; j < this.selectedArr.length; j++) {
                if (this.dataArr[i].key === this.selectedArr[j].key) {
                  flag = 1
                  break
                }
              }
              if (flag === 0) {
                this.selectedArr.push(this.dataArr[i])
              }
            }
          }, 200)
        }
        else {
          console.log('没有点击shift，选中过其他文件，将当前文件设置为开始')
          for (let i = 0; i < this.dataArr.length; i++) {
            if (this.dataArr[i].key === item.key) {
              this.selectStartIndex = i
              break
            }
          }
        }
      }
    },
    clickItem1(item) {
      //如果事先并没有选中任何的文件，则设置其为开始
      if (this.selectStartIndex1 === -1) {
        console.log('右侧事先并没有选中任何的文件，则设置其为开始')
        for (let i = 0; i < this.TaskdataArr.length; i++) {
          if (this.TaskdataArr[i].key === item.key) {
            this.selectStartIndex1 = i
            break
          }
        }
      }
      else {
        if (this.onShift) {
          console.log('事先点击了某个文件，然后按住shift点了另外一个文件，选中开始到结束')
          setTimeout(()=>{
            for (let i = 0; i < this.TaskdataArr.length; i++) {
              if (this.TaskdataArr[i].key === item.key) {
                this.selectEndIndex1 = i
                break
              }
            }
            let start = this.selectStartIndex1
            let end = this.selectEndIndex1
            if(start > end){  //交换开始和结束
              start = this.selectEndIndex1
              end = this.selectStartIndex1
            }
            this.TaskSelectedArr = []
            for (let i = start; i <= end; i++) {
              let flag = 0
              for (let j = 0; j < this.TaskSelectedArr.length; j++) {
                if (this.TaskdataArr[i].key === this.TaskSelectedArr[j].key) {
                  flag = 1
                  break
                }
              }
              if (flag === 0) {
                this.TaskSelectedArr.push(this.TaskdataArr[i])
              }
            }
          }, 200)
        }
        else {
          console.log('没有点击shift，选中过其他文件，将当前文件设置为开始')
          for (let i = 0; i < this.TaskdataArr.length; i++) {
            if (this.TaskdataArr[i].key === item.key) {
              this.selectStartIndex1 = i
              break
            }
          }
        }
      }
    },
    dblclickFolder(event) {
      // console.log('双击文件夹，进入别的文件夹，需要将当前路径记录在栈里')
      this.pathStack.push(this.currentPath)
      const folderPath = event['filepath']
      // console.log('pathStack:', this.pathStack)
      this.explorerInit()
      if (event['type'] === 'folder') {
        this.getData(folderPath)
      }
    },
    dblclickFile(event) {
      let image_path = event['filepath']
      console.log('双击文件', image_path)
      this.$store.commit('SET_IMGAESHOW_FLAG_TRUE')  //标志双击图片进入图片浏览页面
      this.$router.push({
        path: 'image_show',  //任务选择页面的路由地址名
        query: { image_path: image_path }
      })
    },
    selectFiles() {
      this.getData(this.selectpath)
      this.pathStack.push(this.currentPath)
    },
    getBack() {
      // console.log('返回上一级')
      const i = this.pathStack.length
      if (i >= 1) {
        this.explorerInit()
        const backPath = this.pathStack[i - 1] // 取栈顶元素
        this.pathStack.pop()
        // console.log('返回上一级路径', backPath)
        this.getData(backPath)
      } else {
        this.openMessageBox('没有上一级了！')
      }
    },
    openMessageBox(message) {
      this.$alert(message, ' ', {
        confirmButtonText: '确定'
        // callback: action => {
        //   this.$message({
        //     type: 'info',
        //     message: `action: ${ action }`
        //   });
        // }
      })
    },
    dragMove(folder, data) {
      // console.log(folder, data)
    },
    explorerInit() {
      this.selectedArr.splice(0, this.selectedArr.length)
      this.dataArr.splice(0, this.dataArr.length)
      this.selection = true
      this.seletedFileList.splice(0, this.seletedFileList.length)
    },
    isImage(filename) {
      // 后缀获取
      let suffix = ''
      // 获取类型结果
      let result = ''
      try {
        const flieArr = filename.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      console.log('image_mode:', suffix)
      // fileName无后缀返回 false
      if (!suffix) {
        result = false
        return result
      }
      // 图片格式
      const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      // 进行图片匹配
      result = imglist.some(function(item) {
        return item === suffix
      })
      if (result) {
        result = 'image'
        return result
      }
    },
    handleAvatarSuccess(file) {
      console.log('handleAvatarSuccess')
      this.imageUrl = URL.createObjectURL(file.raw)
      this.imageUrlable = true
    },
    beforeAvatarUpload(file) {
      // const isImage = file.type === 'image/jpeg/png'
      if (!this.isImage(file.name)) {
        this.$message.error('上传图片需是图片类型文件!')
      } else {
        // this.handleAvatarSuccess(file)
        this.getFile(file)
      }
      return !this.isImage(file)
    },
    // 把图片转成base64编码
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    },
    getFile(file) {
      const that = this
      this.getBase64(file).then(res => {
        const params = res.split(',')
        console.log(params, 'params')
        if (params.length > 0) {
          that.imageUrl = params[0] + ',' + params[1]
          // console.log('this.imageUrl:', this.imageUrl)
          postImageData(params[1]).then((response) => {
            console.log('获取成功，返回结果', response.data.image_path)
            that.url = response.data.image_path
            that.srcList.push(response.data.image_path)
          }).catch((error) => {
            console.log('获取失败，返回结果', error)
          })
        }
      })
    },
    submitTask() {
      this.canAssign = true       // 可分配人员
      // console.log('this.selectedArr', this.selectedArr)  // 选中的
      // console.log('this.TaskdataArr', this.TaskdataArr)   //已有的
      const json = this.selectedArr.concat(this.TaskdataArr) //合并数组   将左右合并
      // console.log('json', json)
      const newJson = []
      for (let i = 0; i < json.length; i++) {
        if(json[i].type === 'image' && json[i].hasAssign === 1){  //如果该图片已经呗分配过了，就不添加到右侧窗格
          continue
        }
        let flag = true
        for (let j = 0; j < newJson.length; j++) {
          if (newJson[j].filepath === json[i].filepath) {
            flag = false
          }
        }
        if (flag) { // 判断是否重复
          newJson.push(json[i])
        }
      }
      // 获取数量
      getTaskImageNum(newJson).then(res=>{
        this.fileCount = res.data.fileCount
        this.fileDirCount = res.data.fileDirCount
      })
      this.TaskdataArr = newJson
      this.selectedArr = []
    },
    reChoose() {
      this.fileCount = 0
      this.fileDirCount = 0
      this.canAssign = false
      this.selectedArr = []
      this.TaskdataArr = []
    }
    // handleUploadRemove (file, fileList) {
    //   this.proofImage = ''
    // },
    // handlePictureCardPreview (file) {
    //   console.log('PictureCardPreview:', file.url)
    //   this.imageUrl = file.url
    //   this.imageUrlable = true
    // },
    // show_image (file) {
    //   console.log('show_image: ', file.url)
    //   this.imageUrl = file.url
    //   this.imageUrlable = true
    // }
  }
}

</script>
<style scoped>
.leftDiv {
  text-align: left;
  padding-bottom: 2mm;
  padding-right: 2mm;
  padding-top: 2mm;
}

.explorerBox {
  height: 500px;
  overflow: auto;
}

.text_class {
  text-align: center;
  margin: auto;
  font-size: 20px;
  position: relative;
}

.btn1Class {
  font-size: 16px;
  margin-right: 30px;
  margin-left: 5px;
}

.btn2Class {
  font-size: 16px;
  margin-right: 20px;
  margin-left: 15px;
}

.btn3Class {
  font-size: 5px;
  padding-left: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 8px;
  margin-right: 0px;
  /*margin-left: 30px;*/
  margin-top: 5px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
